<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Monaco Editor</title>
    <script type="text/javascript" src="./js/FileSaver.js"></script>
    <script type="text/javascript" src="./vs/loader.js"></script>
    <script defer type="text/javascript" src="/stage/protyle/js/lute/lute.min.js"></script>
    <!-- <script type="text/javascript" src="/appearance/themes/Dark+/script/test/monaco/0.33.0/dev/vs/loader.js"></script> -->
    <script defer type="module" src="./main.js"></script>
</head>

<style>
    @media (prefers-color-scheme: light) {
        :root {
            --background-color: #EEE;
            --foreground-color: #333A;
            --foreground-color-hover: #333;
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --background-color: #1E1E1E;
            --foreground-color: #CCCC;
            --foreground-color-hover: #CCC;
        }
    }

    html,
    body {
        margin: 0;
        border: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        color: var(--foreground-color);
        background-color: var(--background-color);
    }

    #breadcrumb,
    #container {
        position: fixed;
        /* left: 0;
        right: 0; */
        width: 100%;
    }

    #breadcrumb {
        top: 0;
        height: 1.5em;
        display: inline-block;
        white-space: nowrap;
        z-index: 1;
        /* font-weight: bold; */
    }

    #toolbar {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2;
        line-height: 1.5em;
    }

    #picker {
        border-radius: 0.25em;
    }

    #breadcrumb>* {
        display: inline-block;
        font-size: 1em;
        line-height: 1.5em;
        white-space: nowrap;
        color: var(--foreground-color);
    }

    #breadcrumb>*:hover {
        color: var(--foreground-color-hover);
    }

    #status {
        width: 1em;
        height: 1em;
        text-align: center;
        color: white;
    }

    #type {
        text-decoration: underline;
    }

    #crumb {
        text-decoration: none;
        /* padding-left: 1em; */
    }

    #container {
        position: fixed;
        top: 1.5em;
        height: calc(100% - 1.5em);
    }
</style>

<body>
    <div id="breadcrumb">
        <!-- REF [HTML <a> 标签的 target 属性](https://www.w3school.com.cn/tags/att_a_target.asp) -->
        <span id="status">🔍</span>
        <a id="type" target="_blank"></a>
        <a id="crumb" target="_blank" title="Monaco Editor">Monaco Editor</a>
    </div>
    <div id="toolbar">
        <select id="picker">
            <option>abap</option>
            <option>apex</option>
            <option>azcli</option>
            <option>bat</option>
            <option>bicep</option>
            <option>cameligo</option>
            <option>clojure</option>
            <option>coffee</option>
            <option>cpp</option>
            <option>csharp</option>
            <option>csp</option>
            <option>css</option>
            <option>cypher</option>
            <option>dart</option>
            <option>dockerfile</option>
            <option>ecl</option>
            <option>elixir</option>
            <option>flow9</option>
            <option>freemarker2</option>
            <option>fsharp</option>
            <option>go</option>
            <option>graphql</option>
            <option>handlebars</option>
            <option>hcl</option>
            <option>html</option>
            <option>ini</option>
            <option>java</option>
            <option>javascript</option>
            <option>json</option>
            <option>julia</option>
            <option>kotlin</option>
            <option>less</option>
            <option>lexon</option>
            <option>liquid</option>
            <option>lua</option>
            <option>m3</option>
            <option selected>markdown</option>
            <option>mips</option>
            <option>msdax</option>
            <option>mysql</option>
            <option>objective-c</option>
            <option>pascal</option>
            <option>pascaligo</option>
            <option>perl</option>
            <option>pgsql</option>
            <option>php</option>
            <option>pla</option>
            <option>plaintext</option>
            <option>postiats</option>
            <option>powerquery</option>
            <option>powershell</option>
            <option>protobuf</option>
            <option>pug</option>
            <option>python</option>
            <option>qsharp</option>
            <option>r</option>
            <option>razor</option>
            <option>redis</option>
            <option>redshift</option>
            <option>restructuredtext</option>
            <option>ruby</option>
            <option>rust</option>
            <option>sb</option>
            <option>scala</option>
            <option>scheme</option>
            <option>scss</option>
            <option>shell</option>
            <option>solidity</option>
            <option>sophia</option>
            <option>sparql</option>
            <option>sql</option>
            <option>st</option>
            <option>swift</option>
            <option>systemverilog</option>
            <option>tcl</option>
            <option>twig</option>
            <option>typescript</option>
            <option>vb</option>
            <option>wgsl</option>
            <option>xml</option>
            <option>yaml</option>
        </select>
    </div>
    <div id="container"></div>
</body>

</html>
